<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>main</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" href="text/css" href="../css/swiper-bundle.min.css" />

    <style>
        .page {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 100%;
        }

        .search_container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 44px;
            padding: 0 15px;
            background-color: #fff;
            border-bottom: 1px solid #f8f8f8;
        }

        .search_box {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 30px;
            background-color: #f5f5f5;
            border-radius: 15px;
        }

        .search_img {
            width: 12px;
            height: 12px;
            margin-left: 13px;
            margin-right: 6px;
        }

        .search_zi {
            color: #b5b5b5;
            font-size: 12px;
            line-height: 17px;
        }

        .swiper {
            width: 100%;
            position: relative;
            height: 200px;
            overflow: hidden;
        }

        .swiper-wrapper {
            overflow: hidden;
            position: relative;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            width: 500%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            margin: 10px 0;
            height: 180px;
        }

        .swiper-slide img {
            display: block;
            width: 100%;
            height: 173px;
            border-radius: 8px;
        }

        .swiper-pagination {
            display: flex;
            justify-content: center;
            position: absolute;
            width: 100%;
            bottom: 22px;
        }

        .swiper-pagination-bullet {
            width: 3px;
            height: 3px;
            text-align: center;
            line-height: 3px;
            opacity: 1;
            background: rgba(255, 255, 255, 0.4);
            margin: 0 2px;
            border-radius: 50%;

        }

        .swiper-pagination-bullet-active {
            background: #fff;
            width: 12px;
            height: 3px;
            border-radius: 1.5px;
        }

        .banner_box {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            height: 106px;
            background: #fff;
        }

        .sort_item {
            width: 50px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .banner_img {
            width: 50px;
            height: 50px;
            margin: 16px auto 8px;
        }

        .banner_title {
            text-align: center;
            line-height: 17px;
            height: 17px;
            font-size: 12px;
            color: #666666;
        }


        .common_tit {
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 5px;
            padding: 15px;
            background-color: #fff;
        }

        .common_zi {
            font-size: 20px;
            height: 28px;
            line-height: 28px;
            font-weight: bold;
            color: #6e552b;
        }

        .flex1 {
            flex: 1;
        }

        .common_morebtn {
            flex-direction: row;
            align-items: center;
        }

        .common_more {
            font-size: 12px;
            color: #8f8f8f;
        }

        .common_img {
            width: 10px;
            height: 10px;
        }

        .-list-item {
            display: flex;
            flex-direction: row;
            align-items: center;
            height: 120px;
            padding: 12px 0;
            border-bottom: 1px solid #f8f8f8;
            background-color: white;
            box-sizing: border-box;
        }

        .-list-item:active {
            opacity: 0.8;
        }

        .-list-item-img {
            width: 120px;
            height: 90px;
            border-radius: 4px;
            margin-left: 15px;
        }

        .-list-item-content {
            display: flex;
            flex-direction: column;
            flex: 1;
            height: 100%;
            margin-left: 12px;
            margin-right: 15px;
        }

        .-list-item-title {
            line-height: 22px;
            height: 44px;
            font-size: 14px;
            color: #333333;
            font-weight: bold;
            text-overflow: ellipsis;
            white-space: normal;
            overflow: hidden;
            -webkit-line-clamp: 2;
        }

        .flex1 {
            flex: 1;
        }

        .-list-item-bottom {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .-list-item-price {
            font-size: 14px;
            line-height: 19px;
            font-weight: 500;
            color: #fe5c00;
        }

        .-list-item-delprice {
            font-size: 14px;
            text-decoration: line-through;
            margin-left: 8px;
            color: #8f8f8f;
        }

        .-list-item-num-box {
            display: flex;
            flex-direction: row;
            align-items: center;
            padding: 1px 6px;
            background-color: #fef8f4;
            border-radius: 8px;
            border: 1px solid #fe904a;
        }

        .-list-item-num-img {
            width: 9px;
            height: 11px;
            margin-right: 3px;
        }

        .-list-item-num {
            color: #fe904a;
            font-size: 10px;
        }

        .grid_box {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            padding: 3px 15px;
            background-color: #fff;
            justify-content: space-between;
        }

        .-grid-item {
            width: 48%; 
            margin-bottom: 5px;
            border-radius: 8px;
            border: 1px solid #f6f6f6;
            border-bottom: 3px solid #f6f6f6;
            box-sizing: border-box;
        }

        .-grid-item-img {
            width: 100%;
        }

        .-grid-item-title {
            font-size: 14px;
            line-height: 20px;
            height: 40px;
            margin: 5px 12px 0;
            color: #333333;
            font-weight: bold;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            -webkit-line-clamp: 2;
            display: block;
        }

        .-grid-item-price {
            margin-left: 12px;
            line-height: 12px;
            font-weight: 500;
            color: #fe5c00;
            font-size: 14px;
            margin-bottom: 15px;
        }
    </style>
</head>

<body>
    <div class="page">
        <div class="nav-bar">
            <span class="nav-bar-title">首页</span>
        </div>
        <div class="scroll-view-y">
            <!-- 搜索 -->
            <div class="search_container">
                <div class="search_box">
                    <img class="search_img" src="../images/main1/search.png" />
                    <span class="search_zi">请输入商品名称</span>
                </div>
            </div>
            <!-- 首页轮播图 -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper"></div>
                <div class="swiper-pagination"></div>
            </div>
            <!-- 分类列表 -->
            <div class="banner_box"></div>
            <!-- 商品列表纵向 -->
            <div class="goods-list">
                <div class="common_tit">
                    <span class="common_zi">活动专区</span>
                    <div class="flex1"></div>
                    <div class="common_morebtn">
                        <span class="common_more">更多</span>
                        <img class="common_img"
                            src="../images/main1/gor_1.png" />
                    </div>
                </div>
                <div class="goods-list-column">

                </div>

            </div>
            <!-- 商品列表横向 -->
            <div class="goods-list">
                <div class="common_tit">
                    <span class="common_zi">精品推荐</span>
                    <div class="flex1"></div>
                    <div class="common_morebtn">
                        <span class="common_more">更多</span>
                        <img class="common_img"
                            src="../images/main1/gor_1.png" />
                    </div>
                </div>
                <div class="grid_box">

                </div>
            </div>

        </div>
    </div>
</body>
<script src="../script/api.js"></script>
<script src="../script/swiper-bundle.min.js"></script>
<script>
    apiready = function () {
        $api.fixStatusBar($api.dom('.nav-bar'));
        api.setStatusBarStyle && api.setStatusBarStyle({
            style: 'dark',
            color: '-'
        });

    }


    let swiperList = [
        {
            "icon": "../images/linkImg/3794f574251ab98366a921c0913b3cdc.png"
        },
        {
            "icon": "../images/linkImg/74f3bc9acdac7fc7554869f7011848df.png"
        },
        {
            "icon": "../images/linkImg/1d4e6036e2742d1500dfa7c6b0d65e84.png"
        }
    ]
    getSwiperContent()
    function getSwiperContent() {
        let str = '';
        swiperList.forEach((item,index) => {
            str += `
            <div class="swiper-slide" onclick="getGoodsDetail(${index})"><img src="${item.icon}"></div>
            `
        })
        document.querySelector('.swiper-wrapper').innerHTML = str;
    }

    function getGoodsDetail(param) {
        api.openWin({
            name: 'detail',
            url:'./detail.html'
        })
    }

    var swiper = new Swiper(".mySwiper", {
        loop: true,
        loopPreventsSlide: true,
        autoplay: true,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
            renderBullet: function (index, className) {
                return '<span class="' + className + '"></span>';
            },
        },
    });

    let sortList = [{
        "id": "f4aaeef0-caf6-11ea-8523-0da8a6a49497",
        "name": "连衣裙",
        "icon": "../images/linkImg/e2eeaa09375067448a2389831afdfafe.png"
    }, {
        "id": "fc084f30-caf6-11ea-8523-0da8a6a49497",
        "name": "衬衫",
        "icon": "../images/linkImg/5cc9c8a23f3b3f039b8584f73c0fb338.png"
    }, {
        "id": "1ff38f90-caf7-11ea-8523-0da8a6a49497",
        "name": "半身裙",
        "icon": "../images/linkImg/07e8b3a6970cac4bd001b47e22526df6.png"
    }, {
        "id": "418835c0-caf7-11ea-8523-0da8a6a49497",
        "name": "针织衫",
        "icon": "../images/linkImg/3869e031b7cf08f0150171c85ea155c1.png"
    }]
    getSortContent()
    function getSortContent() {
        let str = '';
        sortList.forEach((item, index) => {
            str += `
            <div onclick="onDetailClick(${index})" class="sort_item">
                <img class="banner_img" src=${item.icon} />
                <span class="banner_title">${item.name}</span>
            </div>
            `
        })
        document.querySelector('.banner_box').innerHTML = str;

    }

    function onDetailClick(param) {
        api.setTabBarAttr({
            index: 1
        });
    }


    let goodListColumn = [{
        id: "1",
        title: "莫代尔无袖吊带连衣裙春秋侧开叉长裙女夏季内搭修身显瘦打底裙子",
        image: "../images/linkImg/7a6f4bb167b352d84a884fcc93c5442e.png",
        price: 6999,
        buy_num: 39000,
        delprice: 7299
    }, {
        id: "2",
        title: "夏新款套装女洋气时尚短裤阔腿裤两件套小个子夏装搭配显高",
        image: "../images/linkImg/d8a697c7e8cf71516074cefde7466e12.png",
        price: 629,
        buy_num: 666,
        delprice: 1236
    }, {
        id: "3",
        title: "2020夏新款韩版连衣裙女收腰显瘦显高A字裙气质法式",
        image: "../images/linkImg/c6f60b449d9112c4aac0b681da880526.png",
        price: 1299,
        buy_num: 200,
        delprice: 2199
    }, {
        id: "4",
        title: "港风套装女复古chic减龄短袖 ins复古穿搭",
        image: "../images/linkImg/6d5eb36bc7afa77efcc6356f021b7625.png",
        price: 1998,
        buy_num: 1234,
        delprice: 2666
    }]
    getGoodsContent()
    function getGoodsContent() {
        let str = '';
        goodListColumn.forEach((item, index) => {
            str += `
                <div class="list-ac" onclick="getGoodsDetail(${index})">
                    <div class="-list-item">
                        <img class="-list-item-img" src=${item.image} mode="aspectFill" />
                        <div class="-list-item-content">
                            <span class="-list-item-title">${item.title}</span>
                            <div class="flex1"></div>
                            <div class="-list-item-bottom">
                                <span class="-list-item-price">${'￥' + item.price}</span>
                                <span class="-list-item-delprice color_5">${'￥' + item.delprice}</span>
                                <div class="flex1"></div>
                                <div class="-list-item-num-box">
                                    <img class="-list-item-num-img" src='../images/main2/hot.png' />
                                    <span class="-list-item-num">${fixBuynum(item.buy_num)}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            `
        })
        document.querySelector('.goods-list-column').innerHTML = str;

    }

    let goodsListGt = [{
        id: "1",
        title: "吊带连衣裙女2020夏季新款夏季雪纺上衣真…",
        image: "../images/linkImg/19e25045ec08361d583a31be8ab2270a.png",
        price: 399,
        buy_num: 39000,
        delprice: 7299
    }, {
        id: "2",
        title: "港风套装女复古chic减龄短袖",
        image: "../images/linkImg/02a33b94f3856b401bc8153ecac56385.png",
        price: 299,
        buy_num: 666,
        delprice: 1236
    }, {
        id: "3",
        title: "休闲时尚套装女夏裤子洋气可盐可甜",
        image: "../images/linkImg/e7754353993fee1251b4b07f6ed60cf5.png",
        price: 369,
        buy_num: 200,
        delprice: 2199
    }, {
        id: "4",
        title: "时尚短裤阔腿裤两件套",
        image: "../images/linkImg/5b5e1dab45b0d7c9850bffb1d693e92c.png",
        price: 329,
        buy_num: 1234,
        delprice: 2666
    }]

    getGoodsGtContent()
    function getGoodsGtContent() {
        let str = '';
        goodsListGt.forEach((item, index) => {
            str += `
            <div class="-grid-item" onclick="getGoodsDetail()">
                <img class="-grid-item-img" src=${item.image} mode="aspectFill"/>
                <span class="-grid-item-title">${item.title}</span>
                <span class="-grid-item-price">${'￥' + item.price}</span>
            </div>
            `
        })
        document.querySelector('.grid_box').innerHTML = str;

    }
    function fixBuynum(num) {
        if (!num) { return 0; }
        num = parseInt(num);
        if (num > 9999) {
            num = (num / 10000).toFixed(2);
            num = num + 'w';
        }
        return num;
    }

</script>

</html>